import React from 'react'
import axios from 'axios'
import './Detail.css'
import Header from '../components/Header'
import Footer from '../components/Footer'
import Productioninfo from '../components/Productioninfo'
import { Row, Col } from 'antd'
class Detail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            b: 1,
            shuju: {},
            shuju2: []
        }
        console.log(props.history)
        console.log(props.location)
        console.log(props.location.search)





        console.log(props.match)
    }

    // 渲染之后请求  axios页面数据 
    componentDidMount() {
        console.log('componentDidMount')
        axios({
            // url: 'http://localhost:3003/globaltravel',
            url:'https://www.fastmock.site/mock/ada2a3a8b01bdb3a5387b2a20ac81d7b/apireacttravel/detail',
            method: 'get',
            params: {
                reactid: this.props.match.params.touristid
            }
        }).then(res => {
            console.log('res', res)
            this.setState({
                shuju: res.data.data2,
                shuju2: res.data.data2.touristRoutePictures
            })
        }).catch(error => {
            console.log('error')
        })
    }



    a = (e) => {

    }

    render() {
        return (
            <div>
                <Header></Header>

                <div className='page-content'>
                    {/* 产品简介 */}
                    <div className='product-intro-container'>
                        <Row>
                            <Col span={15}>
                                <Productioninfo
                                    title={this.state.shuju.title}
                                    shortDescription={this.state.shuju.description}
                                    price={this.state.shuju.originalPrice}
                                    discount={this.state.shuju.price}
                                    rating={this.state.shuju.rating}
                                    pictures={this.state.shuju2.map((p) => p.url)}
                                >

                                </Productioninfo>
                            </Col>
                            <Col span={9}></Col>
                        </Row>
                    </div>
                    {/* 锚点菜单  */}
                    <div className='product-detail-anchor'></div>
                    {/* 产品特色 */}
                    <div className='product-detail-container'></div>
                    {/* 费用 */}
                    <div id='feature' className='product-detail-container'></div>
                    {/* 预定须知 */}
                    <div id='notes' className='product-detail-container'></div>
                    {/* 商品评价 */}
                    <div id='comments' className='product-detail-container'></div>
                </div>
                <Footer></Footer>

            </div>
        )
    }

}


export default Detail